<template>
  <view class="login-container">
    <sc-image src="/static/imgs/bg_login.png" width="100%" height="453"></sc-image>
    <view class="content">
      <up-form labelPosition="top" :model="loginForm" :rules="loginRules" ref="form" :label-width="500" :labelStyle="{
        color: '#3d3d3d',
        fontSize: '27rpx',
        lineHeight: '45rpx',
      }">
        <up-form-item label="手机号" prop="loginForm.username">
          <view class="input-wrap" :class="{ 'active': activeInput === 'username' }">
            <input v-model="loginForm.username" @focus="activeInput = 'username'" @blur="activeInput = null"></input>
          </view>
        </up-form-item>
        <up-form-item :label="['密码', '验证码'][pattern]" prop="loginForm.password" @click="
          showSex = true;
        hideKeyboard();">
          <view class="input-wrap" :class="{ 'active': activeInput === 'password' }">
            <input v-model="loginForm.password" :type="['password', 'text'][pattern]" placeholder="请输入密码"
              @focus="activeInput = 'password'" @blur="activeInput = null"></input>
            <sc-text v-if="pattern === '1'" text="获取验证码" color="primary" size="27"></sc-text>
          </view>
        </up-form-item>
      </up-form>
      <view class="btn" @click="handleLogin">确定登录</view>
      <sc-view padding="20rpx 0">
        <up-divider text="OR" line-color="#9EA7B8"></up-divider>
      </sc-view>
      <sc-flex direction="t" ai="center" row-gap="60">
        <sc-text :text="['验证码登录', '密码登录'][pattern]" color="primary" size="27"
          @click="pattern = pattern === '0' ? '1' : '0'"></sc-text>
        <sc-flex>
          <sc-text text="还没有账户？点击" color="#818BA0" size="27"></sc-text>
          <sc-text text="注册账户" color="primary" size="27" @click="uni.$sc.push('/pages/login/register')"></sc-text>
        </sc-flex>
      </sc-flex>
    </view>
  </view>
</template>

<script setup>
import { useUserStore } from "@/store";
const loading = ref(false);
const activeInput = ref(null)
const pattern = ref('0') // 
const loginForm = reactive({
  username: "admin",
  password: "admin123",
  tanantId: 1,
});

const loginRules = reactive({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

/**
 * 处理登录
 */
const handleLogin = async () => {
  loading.value = true;

  try {
    const res = await useUserStore().login(loginForm);
    if (res) {
      uni.showToast({
        title: "登录成功",
        icon: "success",
      });
      // 跳转到首页
      setTimeout(() => {
        uni.navigateTo({
          url: "/pages/home/home",
        });
      }, 1500);
    }
  } catch (error) {
    uni.showToast({
      title: "登录失败，请重试",
      icon: "none",
    });
  } finally {
    loading.value = false;
  }
};

/**
 * 页面加载时检查登录状态
 */
onLoad(() => {
  const token = uni.getStorageSync("token");
  if (token) {
    // 已登录，直接跳转到首页
    uni.switchTab({
      url: "/pages/home/home",
    });
  }
});
</script>

<style lang="scss" scoped>
page {
  background-color: $color-bg;
}

.login-container {
  height: 100vh;

  .content {
    padding: 60rpx 52rpx;
  }

  .input-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    width: 100%;
    height: 105rpx;
    background: #FFFFFF;
    border-radius: 23rpx;
    gap: 20rpx;

    &.active {
      border: 2rpx solid $color-primary;
      box-shadow: 0rpx 0rpx 0rpx 8rpx rgba(15, 103, 254, 0.25);
    }

    >input {
      flex: 1;
      height: 100%;
      font-size: 27rpx;
      line-height: 45rpx;
      color: #3D3D3D;
    }
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 55rpx;
    height: 105rpx;
    background: $color-primary;
    border-radius: 23rpx;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 700;
    font-size: 30rpx;
    color: #FFFFFF;
    line-height: 41rpx;
  }
}
</style>
